import React from 'react';
import { Card, Typography, Table, DatePicker, Select, Button, Row, Col, Empty, Badge } from 'antd';
import { SearchOutlined, FileTextOutlined, DownloadOutlined, FilterOutlined } from '@ant-design/icons';
import Layout from '../../components/Layout';

const { Title, Paragraph } = Typography;
const { RangePicker } = DatePicker;
const { Option } = Select;

// 模拟病历数据
const mockMedicalRecords = [
  {
    id: 'MR20240501',
    department: '骨科',
    doctor: '王医生',
    diagnosis: '膝关节退行性变',
    date: '2024-05-01',
    status: '已归档',
  },
  {
    id: 'MR20240315',
    department: '心内科',
    doctor: '张医生',
    diagnosis: '高血压1级',
    date: '2024-03-15',
    status: '已归档',
  },
  {
    id: 'MR20240120',
    department: '康复科',
    doctor: '李医生',
    diagnosis: '腰椎间盘突出',
    date: '2024-01-20',
    status: '已归档',
  },
];

const MedicalRecords: React.FC = () => {
  const columns = [
    {
      title: '病历编号',
      dataIndex: 'id',
      key: 'id',
      render: (text: string) => <a href="#">{text}</a>,
    },
    {
      title: '就诊科室',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '主治医生',
      dataIndex: 'doctor',
      key: 'doctor',
    },
    {
      title: '诊断结果',
      dataIndex: 'diagnosis',
      key: 'diagnosis',
    },
    {
      title: '就诊日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Badge status="success" text={status} />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record: any) => (
        <Button type="link" icon={<DownloadOutlined />}>查看详情</Button>
      ),
    },
  ];

  return (
    <Layout title="病历查询">
      <Title level={4}>病历查询</Title>
      
      <Card style={{ marginBottom: 24 }}>
        <Row gutter={16} align="middle">
          <Col xs={24} sm={12} md={8} lg={6}>
            <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
          </Col>
          <Col xs={24} sm={12} md={8} lg={6}>
            <Select placeholder="选择科室" style={{ width: '100%' }}>
              <Option value="all">全部科室</Option>
              <Option value="orthopedics">骨科</Option>
              <Option value="cardiology">心内科</Option>
              <Option value="rehabilitation">康复科</Option>
            </Select>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6}>
            <Button type="primary" icon={<SearchOutlined />} block>查询</Button>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6}>
            <Button icon={<FilterOutlined />} block>高级筛选</Button>
          </Col>
        </Row>
      </Card>

      <Card>
        <Table
          columns={columns}
          dataSource={mockMedicalRecords}
          rowKey="id"
          pagination={{
            pageSize: 10,
          }}
          locale={{
            emptyText: <Empty description="暂无病历记录" />,
          }}
        />
      </Card>
    </Layout>
  );
};

export default MedicalRecords;